<template>
  <div>
    <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
    <a-modal
      :width="600"
      :visible="props.visible"
      :title="isUpdate ? '编辑知识库' : '创建知识库'"
      :wrap-style="{overflow: 'hidden'}"
      @ok="handleOk"
      @update:visible="updateVisible"
      @close="updateVisible(false)"
    >
      <!-- <p>{{ formSchemas[0].label }}</p> -->
      


      <a-form ref="userFormRef" :model="form" :labelCol="{ span: 24 }" :wrapperCol="{ span: 24 }" :rules="rules">
        
        <a-form-item :label="formSchemas[1].label" name="name">
          <a-input v-model:value="form.name" :placeholder="formSchemas[1].componentProps.placeholder" />
        </a-form-item>

        <a-form-item :label="formSchemas[2].label" name="descr">
          <a-textarea v-model:value="form.descr" :placeholder="formSchemas[2].componentProps.placeholder" />
        </a-form-item>

        <a-form-item
          name="embedId"
          :label="formSchemas[3].label"
        >
          <a-select v-model:value="form.embedId" placeholder="请选择向量模型">
            <!-- <a-select-option aria-placeholder="请选择向量模型" value="error">请选择...</a-select-option> -->
            <a-select-option :value="modelListData[0].value">OpenAI向量</a-select-option>
            <a-select-option :value="modelListData[1].value">智谱向量</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item :label="formSchemas[4].label" name="status" :validateStatus="form.status">
          <a-radio-group v-model:value="form.status" button-style="solid">
            <a-radio-button value="enable">启用</a-radio-button>
            <a-radio-button value="disabled">禁用</a-radio-button>
          </a-radio-group>
        </a-form-item>

      </a-form>
      <template #title>
        <div ref="modalTitleRef" style="width: 100%; cursor: move">Draggable Modal</div>
      </template>
      <template #modalRender="{ originVNode }">
        <div :style="transformStyle">
          <component :is="originVNode" />
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
import {ref, computed, watch, watchEffect,defineProps, defineEmits,onMounted } from 'vue';
import { useDraggable } from '@vueuse/core';
import {formSchema, modelListData} from '../AiKnowledgeBase.data'
import { KnowledgeApi } from '../api/KnowledgeApi';
import { saveKnowledge } from '../AiKnowledgeBase.api'
import { value } from 'lodash-es';
import list from '@/i18n/lang/zh_CN/list';
const modalTitleRef = ref(null);
const userFormRef = ref(null);
const modelParams = ref({});
const isUpdate = ref(true);



const form = ref({
  createBy: "",
  createTime: null,
  descr: null,
  embedId: "",
  id: "",
  name: "",
  status: "enable",
  sysOrgCode: null,
  tenantId: null,
  updateBy: null,
  updateTime: null,
});


onMounted(async () => {
  if (props.data) {
    form.value = { ...props.data };
    isUpdate.value = true;
  } else {
    isUpdate.value = false;
  }
});



const rules = ref({
  name: [{ required: true, message: '请输入知识库名称' }],
  descr: [{ required: false }],
  modelName: [{ required: true, message: '请选择向量模型' }],
  status: [{ required: true}],
});




const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data : Object
  })
const emits = defineEmits(['update:visible', 'done']);



const updateVisible = value => {
  emits('update:visible', value);
};

const formSchemas = formSchema.map(item => {
  return {
    label: item.label,
    field: item.field,
    component: item.component,
    // rules: item.rules,
    defaultValue: item.defaultValue,
    required: item.required,
    componentProps: item.componentProps,
  };
});























const {
  x,
  y,
  isDragging,
} = useDraggable(modalTitleRef);


const handleOk = async () => {
    if (userFormRef.value) {
      userFormRef.value.validate().then(async () => {
          const params = { ...form.value, "modelParams": JSON.stringify(modelParams.value) };
          if (!isUpdate.value) {
            KnowledgeApi.add(params).then(() => {
            updateVisible(false);
            emits('done');
            })
          } else {
            KnowledgeApi.edit(params).then(() => {
            updateVisible(false);
            emits('done');
              })
            }
            })
    }
};



const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
});
watch([x, y], () => {
  if (!startedDrag.value) {
    startX.value = x.value;
    startY.value = y.value;
    const bodyRect = document.body.getBoundingClientRect();
    const titleRect = modalTitleRef.value.getBoundingClientRect();
    dragRect.value.right = bodyRect.width - titleRect.width;
    dragRect.value.bottom = bodyRect.height - titleRect.height;
    preTransformX.value = transformX.value;
    preTransformY.value = transformY.value;
  }
  startedDrag.value = true;
});
watch(isDragging, () => {
  if (!isDragging) {
    startedDrag.value = false;
  }
});
watchEffect(() => {
  if (startedDrag.value) {
    transformX.value = preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value;
    transformY.value = preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value;
  }
});
const transformStyle = computed(() => {
  return {
    transform: `translate(${transformX.value}px, ${transformY.value}px)`,
  };
});
</script>